<template>
  <div class="main_spac1">
    <div class="" v-loading="loading" element-loading-text="拼命加载中...">
      <div class="monitor box">
        <div class="monitor_l">
          <div class="monitor_ls paddingRight20 paddingRight20">
            <h3>配送日期</h3>
            <div class="timebox">
              <div class="timechange">
                <el-date-picker
                  v-model="params.send_time"
                  type="date"
                  placeholder="选择日期"
                  v-show="true"
                  ref="datePickerRef"
                  id="datePickerRef"
                  value-format="yyyy-MM-dd"
                  @change="datePick"
                >
                </el-date-picker>
                <div class="change">
                  <span
                    @click="changedate(1)"
                    :class="dateType == 1 ? 'span-change' : ''"
                    >前天</span
                  >
                  <span
                    @click="changedate(2)"
                    :class="dateType == 2 ? 'span-change' : ''"
                    >昨天</span
                  >
                  <span
                    @click="changedate(3)"
                    :class="dateType == 3 ? 'span-change' : ''"
                    >今天</span
                  >
                  <span
                    @click="changedate(4)"
                    :class="dateType == 4 ? 'span-change' : ''"
                    >明天</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            class="monitor_ld padding10 paddingRight20 paddingRight20 paddingBottom20 main_white marginTop10"
          >
            <h3>分拣员效率</h3>
            <div class="monitor_ldt" id="chartColumn"></div>
          </div>
        </div>
        <div class="monitor_r">
          <!-- 第一行 -->
          <div class="monitor_ry box">
            <div class="monitor_ryl paddingRight20 main_white paddingRight20">
              <div class="monitor_ti_header">
                <span>单元分拣进度</span>
                <span>总量：{{ order_list.count }}</span>
              </div>
              <div class="monitor_ti_container">
                <sort-percent :order_list="order_list"></sort-percent>
              </div>
            </div>
            <div class="monitor_ryl marginLeft10 main_white paddingRight20">
              <div class="monitor_ti_header">
                <span>用户分拣进度</span>
                <span>总量：{{ user.count }}</span>
              </div>
              <div class="monitor_ti_container">
                <div class="pieChart">
                  <pie-chart
                    idname="pieChart1"
                    :datalist="user"
                    type="user"
                  ></pie-chart>
                </div>
              </div>
            </div>
            <div class="monitor_ryr marginLeft10 main_white paddingRight20">
              <div class="monitor_ti_header">
                <span>商品分拣进度</span>
                <span>总量：{{ goods.count }}</span>
              </div>
              <div class="monitor_ti_container">
                <div class="pieChart">
                  <pie-chart
                    idname="pieChart2"
                    :datalist="goods"
                    type="goods"
                  ></pie-chart>
                </div>
              </div>
            </div>
          </div>
          <!-- 第二行 -->
          <div class="monitor_rq marginTop10 box">
            <div class="monitor_rql paddingRight20 main_white paddingRight20">
              <div class="monitor_ti_header">
                <span>订单分拣进度</span>
                <span>总量：{{ order.count }}</span>
              </div>
              <div class="monitor_ti_container">
                <div class="pieChart">
                  <pie-chart
                    idname="pieChart3"
                    :datalist="order"
                    type="order"
                  ></pie-chart>
                </div>
              </div>
            </div>
            <div
              class="monitor_rqo paddingRight20 marginLeft10 main_white paddingRight20"
            >
              <div class="monitor_ti_header">
                <span>分拣员出勤率</span>
                <span>人数：{{ sort.count }}</span>
              </div>
              <div class="monitor_ti_container">
                <div class="pieChart">
                  <pie-chart
                    idname="pieChart4"
                    :datalist="sort"
                    type="sort"
                  ></pie-chart>
                </div>
              </div>
            </div>
            <div
              class="monitor_rqr paddingRight20 marginLeft10 main_white paddingRight20"
            >
              <div class="monitor_ti_header">
                <span>缺货商品占比</span>
                <span>缺货总量：{{ order_list_que.over_count }}</span>
              </div>
              <div class="monitor_ti_container">
                <div class="pieChart">
                  <pie-chart
                    idname="pieChart5"
                    :datalist="order_list_que"
                    type="order_list_que"
                  ></pie-chart>
                </div>
              </div>
            </div>
          </div>
          <div class="monitor_rb" style="position: relative">
            <span class="dynamic">分拣动态</span>
            <div class="timeLine" id="timeLine"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { sorting_all } from "@/api/sorting/sortingStart";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import echarts from "echarts";
import { EleResize } from "@/utils/esresize.js";
import { parseTime } from "@/utils/index";
import PieChart from "./components/pieChart.vue";
import SortPercent from "./components/sortPercent.vue";

export default {
  components: {
    PieChart,
    SortPercent,
  },
  data() {
    return {
      value1: "",
      time: {
        year: parseTime(new Date(), "{y}"),
        month: parseTime(new Date(), "{m}"),
        day: parseTime(new Date(), "{d}"),
      },
      // 日期选择
      dateType: 3,
      // 请求参数
      params: {
        send_time: parseTime(new Date(), "{y}-{m}-{d}"),
      },
      customColor: "#19B098",
      // 加载中
      loading: false,
      // 用户分拣进度
      user: {
        count: 0,
        in_count: 0,
        over_count: 0,
        up_count: 0,
      },
      // 订单分拣进度
      order: {
        count: 0,
        in_count: 0,
        over_count: 0,
        up_count: 0,
      },
      // 商品分拣进度
      goods: {
        count: 0,
        in_count: 0,
        over_count: 0,
        up_count: 0,
      },
      // 分拣缺勤率
      sort: {
        count: 0,
        over_count: 0,
      },
      // 单元分拣进度
      order_list: {
        count: 0,
        over_count: 0,
      },
      // 缺货商品占比
      order_list_que: {
        count: 0,
        over_count: 0,
      },
      //每小时分拣进度
      timearr: [],
      // 分拣员效率
      sort_user_list: {},
      datalist: {
        data: [], //{ame:'',value:''}
        series: {
          name: "损耗",
        },
      },
    };
  },
  created() {
    // 加载数据
    this.sorting_all();
  },
  computed: {
    // 时间 年选择数组
    yeararr() {
      let date = new Date();
      let year = date.getFullYear();
      let yeararr = [];
      for (let i = year - 10; i <= year; i++) {
        yeararr.push(i);
      }
      return yeararr;
    },
  },
  mounted() {},
  updated() {
    this.timeLine(this.timearr);
    // 柱状图图表
    this.chartColumn();
  },
  methods: {
    datePick() {
      this.sorting_all();
    },
    changedate(type) {
      this.dateType = type;
      const dateNow = new Date().getTime();
      let date = "";
      switch (type) {
        case 1:
          date = new Date(dateNow - 2 * 24 * 60 * 60 * 1000);
          break;
        case 2:
          date = new Date(dateNow - 1 * 24 * 60 * 60 * 1000);
          break;
        case 3:
          date = new Date();
          break;
        case 4:
          date = new Date(dateNow + 1 * 24 * 60 * 60 * 1000);
          break;
      }
      this.params.send_time = parseTime(new Date(date), "{y}-{m}-{d}");
      this.sorting_all();
    },
    // 获取数据
    sorting_all() {
      this.loading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.params
      );
      sorting_all(data).then((res) => {
        if (res.errcode == 0) {
          let data = res.data.arr;
          this.user = data.user;
          this.goods = data.goods;
          this.order = data.order;
          this.sort = data.sort;
          this.timearr = data.timearr;
          this.order_list_que = data.order_list_que;
          this.order_list = data.order_list;
          this.sort_user_list = data.sort_list;
        }
        this.loading = false;
      });
    },
    // 只适用图表方法
    drawLine(dom, option) {
      if (document.getElementById(dom)) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById(dom));
        let resizeDiv = document.getElementById(dom);

        // 清空画布
        myChart.clear();

        // 绘制图表
        myChart.setOption(option);

        let listener = function () {
          myChart.resize();
        };
        EleResize.on(resizeDiv, listener);
      }
    },
    // 单元分拣对比柱状图图表
    chartColumn() {
      // 柱状图
      let dom = "chartColumn";
      let salvProName = [];
      let salvProValue = [];
      salvProName = Object.keys(this.sort_user_list);
      salvProValue = Object.values(this.sort_user_list);
      let option = {
        grid: {
          left: "0%",
          right: "10%",
          bottom: "2%",
          top: "2%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + " : " + params[0].value;
          },
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#717789",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: salvProName,
          },
        ],
        series: [
          {
            name: "值",
            type: "bar",
            zlevel: 1,
            label: {
              show: true,
              color: "#03A98E",
              position: "right", //每一条的数据位置
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#03A98E",
                  },
                  {
                    offset: 1,
                    color: "#03A98E",
                  },
                ]),
              },
            },
            barWidth: 22,
            data: salvProValue,
          },
        ],
      };
      let no_data_options = {
        graphic: [
          {
            type: "image",
            id: "logo",
            left: "center",
            top: "80",
            bounding: "raw",
            style: {
              image: require("@/assets/images/no_data.png"),
              width: 92,
              opacity: 1,
            },
          },
        ],
      };
      if (salvProValue.length == 0) {
        this.drawLine(dom, no_data_options);
      } else {
        this.drawLine(dom, option);
      }
    },

    // 订单时间线
    timeLine(data) {
      let flag = data.some((item) => {
        return parseFloat(item) > 0;
      });
      var dateList = data.map(function (index, item) {
        return item + ":00";
      });
      var valueList = data.map(function (index, item) {
        return index;
      });

      let option = {
        // title: {
        //   text: "分拣动态",
        //   textStyle: {
        //     color: "#181818",
        //     fontSize: 16,
        //     fontWeight: 600,
        //     lineHeight: 30,
        //     fontFamily:
        //       "Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif",
        //   },
        //   left: 20,
        //   top: 10,
        // },
        xAxis: {
          type: "category",
          data: dateList,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: valueList,
            type: "line",
            lineStyle: {
              color: "#03A98E",
            },
          },
        ],
      };

      let no_data_options = {
        graphic: [
          {
            type: "image",
            id: "logo",
            left: "center",
            top: "60",
            bounding: "raw",
            style: {
              image: require("@/assets/images/no_data.png"),
              width: 92,
              opacity: 1,
            },
          },
        ],
      };

      this.drawLine("timeLine", flag ? option : no_data_options);
    },

    // 时间选择事件
    handleCommand(value, type) {
      if (value < 10) {
        value = "0" + value;
      }
      if (type == 1) {
        this.time.year = value;
      } else if (type == 2) {
        this.time.month = value;
      } else if (type == 3) {
        this.time.day = value;
      }
      this.params.send_time =
        this.time.year + "-" + this.time.month + "-" + this.time.day;
      this.sorting_all();
    },
  },

  // 订单分拣进度
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.monitor {
  .paddingRight20 {
    padding-left: 20px !important;
  }
  .monitor_ti_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    border-bottom: 1px solid $colour_e6;
    font-size: $font_16;
    color: $colour_18;
    // font-weight: 700;
  }
  .monitor_ti_container {
    width: 100%;
    height: calc(100% - 50px);
  }

  .monitor_l {
    width: 350px;
    .monitor_ls {
      background-color: #fff;
      border-radius: 4px;
      color: $colour_18;
      height: 230px;
      h3 {
        height: 50px;
        line-height: 50px;
        font-size: $font_16;
        color: $colour_18;
        border-bottom: 1px solid #e6e6e6;
      }
    }
    .monitor_ld {
      h3 {
        height: 50px;
        line-height: 50px;
        font-size: $font_16;
        color: $colour_18;
        border-bottom: 1px solid $colour_e6;
      }
    }
  }
  #chartColumn {
    width: 100%;
    height: 540px;
  }
  .monitor_ryh {
    height: 200px;
    width: 100%;
  }
  .monitor_r {
    width: calc(100% - 370px);
    margin-left: 10px;
    .monitor_ry {
      height: 290px;
      .monitor_ryl {
        width: 33.33%;
      }
      .monitor_ryo {
        width: 33.33%;
      }
      .monitor_ryr {
        width: 33.33%;
      }
    }
    .monitor_rq {
      height: 290px;
      .monitor_rql {
        width: 33.33%;
      }
      .monitor_rqo {
        width: 33.33%;
      }
      .monitor_rqr {
        width: 33.33%;
      }
    }
  }
}

// 订单柱状图
.orderbar {
  padding: 30px 10px 15px;
  height: 200px;
  box-sizing: border-box;
  position: relative;
  .el-progress {
    display: flex;
    width: 100%;
    margin: 25px 0;
  }
}

// 时间图
.timeLine {
  height: 260px;
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
}

//配送日期时间选择
.timebox {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 45px;
  .el-dropdown-link {
    font-size: 24px;
    color: $green;
  }
  .date {
    margin-right: 6px;
  }
  .menubox {
    height: 50px !important;
    overflow: auto !important;
  }
}
#cvs {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 355px;
  height: 647px;
  border: 2px dashed green;
}
.timechange {
  width: 100%;
  padding: 0 15px;
  /deep/ .el-date-editor {
    width: 100%;
  }
  .change {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 15px;
    span {
      width: 25%;
      height: 30px;
      border: 1px solid #dcdfe6;
      color: #606266;
      display: flex;
      font-size: 14px;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      cursor: pointer;
      &:last-child {
        margin-right: 0;
      }
    }
    .span-change {
      border: 1px solid $green;
      color: $green;
    }
  }
}
.dynamic {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 16px;
  z-index: 99;
}
/deep/.el-progress-bar__outer {
  background-color: #f0f0f0;
}
.pieChart {
  width: 100%;
  height: 100%;
}
</style>
